<!-- author 王方圆 2021-4-11 reference：https://gitee.com/martainTao/activiti-design-vue/tree/master-->
<template>
  <div class="content with-diagram" id="js-drop-zone" style="width: 100%; height: calc(100vh - 0px);">
    <div class="canvas" id="js-canvas"></div>
    <div class="properties-panel-parent" id="js-properties-panel"></div>
  </div>
</template>

<script>
  import $ from "jquery";
  import BpmnModeler from "bpmn-js/lib/Modeler";
  import propertiesPanelModule from "bpmn-js-properties-panel";
  import propertiesProviderModule from "./bpmnlib/properties-panel/provider/activiti";
  import activitiModdleDescriptor from "./bpmnlib/activiti.json";
  import customTranslate from "./bpmnlib/customTranslate/customTranslate";
  import customControlsModule from "./bpmnlib/customControls";
  import "bpmn-js/dist/assets/diagram-js.css";
  import "bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css";
  import "./bpmnlib/bpmn-app.css";
  var container = null;
  var canvas = null;
  var bpmnModeler = null;
  export default {
    name: "Dashboard",
    props: {
      handleData: {}
    },
    data() {
      return {
        bpmnViewer: null,
      };
    },
    mounted() {
      this.$nextTick(() => {
        container = $("#js-drop-zone");
        canvas = $("#js-canvas");
        // 添加翻译组件
        var customTranslateModule = {
          translate: ["value", customTranslate],
        };
        bpmnModeler = new BpmnModeler({
          container: canvas,
          propertiesPanel: {
            parent: "#js-properties-panel",
          },
          additionalModules: [
            propertiesPanelModule,
            propertiesProviderModule,
            customControlsModule,
            customTranslateModule,
          ],
          moddleExtensions: {
            activiti: activitiModdleDescriptor,
          },
        });
        container.removeClass("with-diagram");
        // 渲染初始流程
        this.openDiagram(this.handleData.diagramXML);
      });
    },
    methods: {
      /**
       * 渲染初始流程
       * @param xml
       * @returns {Promise<void>}
       */
      openDiagram: async (xml) => {
        try {
          await bpmnModeler.importXML(xml);
          container.removeClass("with-error").addClass("with-diagram");
        } catch (err) {
          container.removeClass("with-diagram").addClass("with-error");
          container.find(".error pre").text(err.message);
          console.error(err);
        }
      },
      /**
       * 保存xml
       * @returns {Promise<void>}
       */
      async saveXML() {
        const { xml } = await bpmnModeler.saveXML({ format: true });
        this.$emit('getBPMN', xml)
      },
      // 下载svg
      // downloadSvg: async () => {
      //   const { svg } = await bpmnModeler.saveSVG();
      //   console.log(svg, 'svg')
      // }
    },
  };
</script>

<style scoped>

</style>
